<template>
  <div class="contain-box">
    <el-card class="box-card">
      <div class="search">
        <el-button size="small" type="primary" @click="addbtnAgent">添加经纪</el-button>
        <el-input v-model="searchAgent.name_contains" placeholder="请输入关键字" class="input-with-select"> <el-button slot="append" icon="el-icon-search" @click="searchBtn" />
        </el-input>
      </div>
      <el-table
        :data="agentList"
        border
        style="width: 100%"
        height="calc(100vh - 270px)"
      >
        <el-table-column
          prop="image"
          label="图片"
          width="180"
        >
          <template #default="{row}">
            <img :src="row.image" alt="" style="width:100%;height:100%">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="150"
        />
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <el-table-column
          prop="phone"
          label="电话"
          width="180"
        />
        <el-table-column
          prop="address"
          label="地址"
          width="180"
        />
        <el-table-column
          prop="desc"
          label="介绍"
        />
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button size="small" type="primary" @click="editBtn(row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="delBtn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页操作 -->
      <el-row type="flex" justify="center" style="margin-top:10px">
        <!-- 分页 -->
        <pagination ref="pagination" :obj="configPage" :total="total" @currentChange="currentChang" @sizeChange="sizeChang" />
      </el-row>
    </el-card>
    <addAgent ref="addAgentDialog" :search-agent="searchAgent" :is-show-dialog.sync="isShowDialog" :search-id="searchId" @addAgentForm="addAgentForm" @upData="upData" />
  </div>
</template>

<script>
import addAgent from './component/addAgent.vue'
import { getAgent, delAgent, editAgent, getAgentCount } from '@/api/agent'
export default {
  components: { addAgent },
  data() {
    return {
      searchAgent: {
        name_contains: ''
      },
      isShowDialog: false,
      agentList: [],
      currentPage: 1,
      configPage: {
        _start: 0,
        _limit: 2
      },
      total: 1,
      searchId: 0
    }
  },
  created() {
    this.getAgentList()
  },
  methods: {
    // 搜索按钮
    async searchBtn() {
      // 获取搜索框里面的数据，判断是否内容框里是不是有
      console.log(this.searchAgent)
      // const res = await getAgent({ ...this.searchAgent, ...this.configPage })
      // console.log('搜索', res)
      // // 数据重新渲染
      // this.agentList = res.data

      // 数据从第一条开始显示
      this.configPage._start = 0
      this.$refs.pagination.currentPage = 1
      this.getSearchAgent()
      // const result = await getAgentCount({ ...this.searchAgent, ...this.configPage })
      // console.log('搜索重新获取长度', result)
      // this.total = result.data
      // 通过这个变量判断是否有点击搜索给后续翻页使用
      this.searchId = 1
    },
    // 搜索内容函数
    async getSearchAgent() {
      const res = await getAgent({ ...this.searchAgent, ...this.configPage })
      console.log('搜索', res)
      // 数据重新渲染
      this.agentList = res.data
      const result = await getAgentCount({ ...this.searchAgent, ...this.configPage })
      console.log('搜索重新获取长度', result)
      this.total = result.data
    },

    // 编辑按钮
    async editBtn(id) {
      this.isShowDialog = true
      const { data } = await editAgent(id)
      this.$refs.addAgentDialog.agentForm = data
      console.log('id值', this.$refs.addAgentDialog.agentForm.id)
      console.log('回显数据', { data })
      this.$refs.addAgentDialog.uploadimg(data.image)

      // if (this.searchId === 1) {
      //   console.log(44)
      //   // 如果有搜索，将页码和搜索出来的信息传给后台
      //   const res = await getAgent({ ...this.searchAgent, ...this.configPage })
      //   console.log('搜索', res)
      //   // 数据重新渲染
      //   this.agentList = res.data
      // }
      // console.log('结构', this.$refs.addAgentDialog.agentForm)
    },
    // 删除按钮
    async delBtn(id) {
      // 二次确认
      await this.$confirm('确认删除数据')
      // 判断页面显示条数是否最后一条，是的话进行页面的减减
      // if (this.agentList.length === 1 && this.currentPage > 1) {
      //   // console.log(66)
      //   // this.configPage._start = 0
      //   // this.currentPage = 1
      //   this.currentPage--
      //   this.configPage._start = this.configPage._limit * (this.currentPage - 1)
      // }
      if (this.agentList.length === 1 && this.$refs.pagination.currentPage !== 1) {
        this.configPage._start = this.configPage._start - this.configPage._limit
        setTimeout(() => {
          this.$refs.pagination.currentPage--
        }, 200)
      }
      // 调用删除接口
      await delAgent(id)
      // 提示用户
      this.$message.success('删除成功')
      if (this.searchId === 1) {
        this.getSearchAgent()
      } else {
        // 重新刷新页面
        this.getAgentList()
      }
    },
    // 点击新增经纪
    addbtnAgent() {
      this.isShowDialog = true
      this.getSearchAgent()
    },
    async upData(res) {
      this.agentList = res
      this.getSearchAgent()
    },
    async getAgentList() {
      // 根据传递的页面长度渲染页面数据
      // const { data } = await getAgent(this.configPage)
      // //判断是不是搜索的情况
      // if (this.searchId === 1) {
      //   const res = await getAgent({ ...this.searchAgent, ...this.configPage })
      //   // 数据重新渲染
      //   this.agentList = res.data
      // }
      const { data } = await getAgent(this.configPage)
      this.agentList = data
      // 获取数据总长度
      const res = await getAgentCount()
      this.total = res.data
      console.log('长度', res)
      console.log('获取经纪信息', this.agentList)
    },
    // async currentChange(changePage) {
    //   // 点击改变的时候，当前开始条数计算从第几点开始
    //   this.configPage._start = (changePage - 1) * this.configPage._limit
    //   this.currentPage = changePage
    //   // 判断是否有搜索内容
    //   console.log(this.searchId)
    //   // 获取标志有点击搜索的变量来判断
    //   if (this.searchId === 1) {
    //     this.getSearchAgent()
    //   } else { // 重新刷新页面
    //     this.getAgentList()
    //   }
    //   // if (this.searchId === 1) {
    //   //   const res = await getAgent({ ...this.searchAgent, ...this.configPage })
    //   //   // 数据重新渲染
    //   //   this.agentList = res.data
    //   // } else { // 重新刷新页面
    //   //   this.getAgentList()
    //   // }
    //   this.getSearchAgent()
    // },
    // 接受父组件新增经纪
    addAgentForm() {
      this.getAgentList()
    },
    // 分页点击
    currentChang(page, oldPage) {
      // 计算 _start 改变请求响应的数据
      this.configPage._start = (page - oldPage) * this.configPage._limit + this.configPage._start
      // 获取标志有点击搜索的变量来判断
      if (this.searchId === 1) {
        this.getSearchAgent()
      } else { // 重新刷新页面
        this.getAgentList()
      }
      this.getSearchAgent()
    },
    // 每页显示条数变化
    sizeChang(val) {
      // 改变每页显示的数量
      this.configPage._limit = val
      // 数据从第一条开始显示
      this.configPage._start = 0
      // 获取标志有点击搜索的变量来判断
      if (this.searchId === 1) {
        this.getSearchAgent()
      } else { // 重新刷新页面
        this.getAgentList()
      }
      this.getSearchAgent()
    }
  }
}
</script>

<style lang="scss" scoped>
.contain-box{
  margin: 20px;
  .search{
    display: flex;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
.el-input{
  padding-left: 300px;
}
  }
  .el-table{
 margin-top:  20px;
::v-deep.cell{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}
}
}
</style>
